<template>
    <div class="container yuan-container">

        <a-card title="banner管理">
            <div class="filter-panel">
                <a-button style="float:right" type="primary" class="filter-list" @click="add"
                    v-if="$utilCheckPermission(['bannerManagementAdd'])">新增banner</a-button>

            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                    :pagination="false">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button type="primary" @click="clickShow(record)"
                                v-if="$utilCheckPermission(['bannerManagementDetail'])">详情</a-button>
                            <a-button type="warning" style="margin-left:10px" @click="clickEdit(record)"
                                v-if="$utilCheckPermission(['bannerManagementUpdate'])">编辑</a-button>

                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :editInfo="editInfo" :isShow="isShow"
            @resetList="resetList" />
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { Component, Vue } from "vue-property-decorator";
import DetailVue from "./detail.vue";
@Component({
    name: "tpl",
    components: { DetailVue },
})
export default class extends Vue {
    loading = false;
    pageList = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "pageTable",
            key: "pageTable",
            title: "banner标题",
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 300,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.getBannerList();
            this.pageList = res.data?.rows || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    mounted() {
        this.getList();
    }

    isShow = false;
    detailVisible = false;
    add() {
        this.editInfo = {};
        this.isShow = false;
        this.detailVisible = true;
    }

    clickEdit(item) {
        this.isShow = false;
        this.editInfo = item;
        this.detailVisible = true;
    }
    editInfo = {};
    clickShow(item) {
        this.isShow = true;
        this.editInfo = item;
        this.detailVisible = true;
    }
    async clickDelete(item) {
        this.loading = true;
        try {
            await api.deleteResourceAbutment(item.id);
            this.$message.success("删除成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
}
</script>
<style scoped lang="scss">
.container {
}
</style>
